<template>
  <div class="main-container container-limited container-fluid page-holder">
    <groups-breadcrumb />
    <el-collapse v-model="activeItem" accordion class="space-settings header-no-focusing-color">
      <el-collapse-item name="general">
        <div slot="title">
          <p class="collapse-title">常规设置</p>
          <p>修改群组名、群组描述。</p>
        </div>
        <general-settings @close="activeItem = ''" />
      </el-collapse-item>
      <el-collapse-item v-if="isWebAdmin || isGroupOwner" name="advanced">
        <div slot="title">
          <p class="collapse-title">高级设置</p>
          <p>删除群组。</p>
        </div>
        <advanced-settings />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import GroupsBreadcrumb from '@/views/groups/components/breadcrumb';
import GeneralSettings from './settings-general';
import AdvancedSettings from './settings-advanced';

export default {
  name: 'GroupsSettings', // 群组设置
  components: { GroupsBreadcrumb, GeneralSettings, AdvancedSettings },
  data() {
    return {
      activeItem: 'general',
    };
  },
  computed: {
    ...mapGetters(['isWebAdmin', 'isGroupOwner']),
  },
};
</script>

<style></style>
